<template>
  <a-modal
    title="节点维护信息"
    :width="800"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <title-name title="节点完成信息"></title-name>
        <a-row :gutter="24">
            <a-col :md="12" :sm="12">
              <a-form-item
                label="工程名称"
                :labelCol="{lg: {span: 7}, sm: {span:7}}"
                :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
                <BaseInput placeholder=""  v-decorator="['projectName',{rules: [{ message: ' ' }]}]" disabled  />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="12">
              <a-form-item
                label="业务事项"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
                <BaseInput placeholder="" v-decorator="['businessMatters',{rules: [{ message: ' ' }]}]" disabled  />
              </a-form-item>
            </a-col>
          </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="阶段/类别"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput placeholder="" v-decorator="['type',{rules: [{ message: ' ' }]}]" disabled  />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="节点等级"
                    :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                    :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <BaseInput placeholder="" v-decorator="['controLevel',{rules: [{ message: ' ' }]}]" disabled  />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="计划开始时间"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput placeholder="" v-decorator="['startTime',{rules: [{ message: ' ' }]}]" disabled  />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="计划完成时间"
                    :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                    :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <BaseInput placeholder="" v-decorator="['endTime',{rules: [{ message: ' ' }]}]" disabled  />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="亮灯情况"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <div v-if="promptLights == 1" ><img src="../../../assets/icons/yellowLight.png" width="20"/></div>
              <div v-if="promptLights == 2" ><img src="../../../assets/icons/redLight.png" width="20"/></div>
              <div v-if="statusLights == 1" class="lighton1"></div>
              <div v-if="statusLights == 2" class="lighton2"></div>
              <div v-if="statusLights == 3" class="lighton3"></div>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="节点状态"
                    :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                    :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <BaseInput placeholder="" v-decorator="['statusName',{rules: [{ message: ' ' }]}]" disabled  />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12" v-if="complateDate">
            <a-form-item
                    label="节点完成时间"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <!--<a-date-picker style="width: 100%" placeholder="" @change="onChange" v-decorator="['completionTime',{rules: [{ message: ' ' }]}]"/>-->
              <a-date-picker style="width: 100%" @change="onChange"   format="YYYY-MM-DD"/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12" v-if="uncomplateDate">
              <a-form-item
                      label="节点完成时间"
                      :labelCol="{lg: {span: 7}, sm: {span:7}}"
                      :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
                  <!--<a-date-picker style="width: 100%" placeholder="" @change="onChange" v-decorator="['completionTime',{rules: [{ message: ' ' }]}]"/>-->
                  <BaseInput style="width: 100%" disabled v-model="completionTimes" />
              </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12" v-if="unOerdue">
            <a-form-item
                    label="备注"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput placeholder="" type="textarea"  v-decorator="['remark',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12" v-if="isOerdue">
            <a-form-item
                    label="逾期类别"
                    :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                    :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <a-select style="width: 100%;" v-decorator="['overdueCategory',{rules: [{ message: ' ' }]}]"  placeholder="">
                <a-select-option value="0">资金</a-select-option>
                <a-select-option value="1">安全</a-select-option>
                <a-select-option value="2">招标</a-select-option>
                <a-select-option value="3">质量</a-select-option>
                <a-select-option value="4">工艺</a-select-option>
                <a-select-option value="5">劳动力</a-select-option>
                <a-select-option value="6">自供材</a-select-option>
                <a-select-option value="7">甲供材</a-select-option>
                <a-select-option value="8">机械设备</a-select-option>
                <a-select-option value="9">业主设计</a-select-option>
                <a-select-option value="10">场地移交</a-select-option>
                <a-select-option value="11">内部环境</a-select-option>
                <a-select-option value="12">外部环境</a-select-option>
                <a-select-option value="13">内部深化设计</a-select-option>
                <a-select-option value="14">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="isOerdue">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="逾期原因"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput placeholder="" type="textarea"  v-decorator="['overdueReason',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <title-name title="有效赶工措施" v-if="isOerdue"></title-name>
        <a-row :gutter="24" v-if="isOerdue">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="劳动力资源"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput placeholder="" type="textarea"  v-decorator="['laborResources',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="劳动力赶工费用(万元)"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInputNumber placeholder=""  v-decorator="['laborResFee',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>

        </a-row>
        <a-row :gutter="24" v-if="isOerdue">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="机械设备资源"
                    :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                    :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <BaseInput placeholder="" type="textarea"  v-decorator="['equipmentResources',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="机械设备赶工费用(万元)"
                    :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                    :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <BaseInputNumber placeholder=""  v-decorator="['equipResFee',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="isOerdue">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="材料资源"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput placeholder="" type="textarea"  v-decorator="['materialResources',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="材料赶工费用(万元)"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInputNumber placeholder=""  v-decorator="['materialResFee',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="isOerdue">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="安全管理措施"
                    :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                    :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <BaseInput placeholder="" type="textarea"  v-decorator="['safetyMeasures',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="安全管理赶工费用(万元)"
                    :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                    :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <BaseInputNumber placeholder=""  v-decorator="['safetyMeasureFee',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="isOerdue">
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="预计赶工费用(万元)"
                    :labelCol="{lg: {span: 7}, sm: {span:7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInputNumber placeholder=""  v-decorator="['estimatedRushCost',{rules: [{ message: ' ' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <div class="title-name">第三方完工确认单上传</div>
        <u-table :businessCode="businessCode" :listUrl="listUrl" :uploadList="uploadList" :businessId="businessId"   :deleteUrl="deleteUrl" @fileArrysData="fileArrysData"></u-table>


        <title-name title="附件信息" style="margin-top: 20px;"></title-name>
        <u-table :businessCode="businessCode2" :listUrl="listUrls" :uploadList="uploadList" :businessId="businessId"   :deleteUrl="deleteUrl" @fileArrysData="fileArrysDatas"></u-table>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 表单字段
const fields = ['projectName','businessMatters','type','controLevel','startTime','endTime','completionTime','lighton','statusName','overdueCategory','overdueReason','laborResources','equipmentResources','materialResources','safetyMeasures','estimatedRushCost']
const columns = [
  {
    title: '序号',
    dataIndex: 'serial',
    width: '10%',
    scopedSlots: { customRender: 'serial' },
  },
  {
    title: '附件名称',
    dataIndex: 'fileName',
    width: '15%',
  },
  {
    title: '附件格式',
    dataIndex: 'suffixName',
    width: '15%',
  },
  {
    title: '附件地址',
    dataIndex: 'url',
    width: '40%',
  },
  {
    title: '操作',
    key: 'action',
    width: '20%',
    scopedSlots: { customRender: 'action' },
  },
];
const data = [
  {
    name: '一级',
    format: 120,
    address: 'income',
  }
];
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      businessCode:'PM02',
      businessCode2:'PM03',

      // 附件上传
      listUrl:'',
      listUrls:'',
      deleteUrl:'/cscec-project-business/file/business/project-fileDelete',
      uploadList:'/cscec-project-business/file/business/fileUpload',
      businessId:'',


      statusLights:'',  // 状态亮灯 （0：无色，1：绿色，2：浅红色，3：红色）
      promptLights:'',  // 提示亮灯 （0：不亮灯，1：黄灯，2：红灯）

      unOerdue:false,
      isOerdue:false,

      complateDate:false,
      uncomplateDate:false,

      completionTimes:'',

      data,
      columns,
      form: this.$form.createForm(this)
    }
  },
  created () {

    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
      this.statusLights = this.model.statusLights
      this.promptLights = this.model.promptLights
      if(this.model.statusCode == 5 ){   // 状态  0待进行、1正进行、2审核中、3计划完成、4延期完成、5延期未完成
          this.unOerdue = false
          this.isOerdue = true

        var d1 = new Date()
        var year = d1.getFullYear();//年
        var month = d1.getMonth() + 1;//月
        var day = d1.getDate();//日

        if (month < 10) {
          month = "0" + month;
        }
        if (day < 10) {
          day = "0" + day;
        }

        var nowTime = new Date(year + "-"+month+"-"+day) ; // 当前时间

        var completionTime = new Date(this.model.endTime)     // 选择节点完成时间

        let days = parseInt(Math.abs(nowTime.getTime()- completionTime.getTime()) /1000/60/60/24);
        if(days > 10) {
           this.completionTimes =  year + "-"+month+"-"+day
           this.uncomplateDate = true
           this.complateDate = false
        }else {
          this.uncomplateDate = false
          this.complateDate = true
        }

      }else{
        this.unOerdue = true
        this.isOerdue = false
        this.uncomplateDate = false
        this.complateDate = true
      }

    })
  },
  methods:{
    onChange(val){
      this.$emit('completionTimes', val.format('YYYY-MM-DD'))
    },
    fileArrysData(val){
      this.$emit('fileArrysData',val)
    },
    fileArrysDatas(val){
      this.$emit('otherfileArrys',val)
    }
  }
}
</script>

<style>
  .title-name {
    border-left: 5px solid #1890ff;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 15px;
    height: 20px;
    line-height: 20px;
  }
  .ant-form-item-control .ant-form-item-children /deep/ .ant-input{
    width: 100%;
  }
  .lighton1{
    width: 70px;
    height: 35px;
    border-radius: 5px;
    background-color:  rgba(224, 244, 223, 1);
  }
  .lighton2{
    width: 70px;
    height: 35px;
    border-radius: 5px;
    background-color: rgba(251, 230, 232, 1);
  }
  .lighton3{
    width: 70px;
    height: 35px;
    border-radius: 5px;
    background-color: rgba(240, 153, 164, 1);
  }
</style>
